<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品档案查询</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">

    <link href="/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="page-heading">
                <h4>查询条件</h4>
            </div>
            <div class="panel-body">
                <!--查询条件-->
                <form class="form-horizontal" id="file_search_form">
                    <div class="form-group">
                        <label class="control-label col-md-2" style="padding-right: 0px;">请选择I级分类：</label>
                        <div class="col-md-2" style="padding-left: 0px">
                            <select class="form-control" id="search_firstKindId" name="search_firstKindId">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                        <label class="control-label col-md-2" style="padding-right: 0px;">请选择II级分类：</label>
                        <div class="col-md-2" style="padding-left: 0px">
                            <select class="form-control" id="search_secondKindId" name="search_secondKindId">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                        <label class="control-label col-md-2" style="padding-right: 0px;">请选择III级分类：</label>
                        <div class="col-md-2" style="padding-left: 0px">
                            <select class="form-control" id="search_thirdKindId" name="search_thirdKindId">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2" style="padding-right: 0px;">请选择产品用途类型：</label>
                        <div class="col-md-2" style="padding-left: 0px">
                            <select class="form-control" id="search_type" name="search_type">
                                <option value="">--请选择--</option>
                                <option value="Y001-1">商品</option>
                                <option value="Y001-2">物料</option>
                            </select>
                        </div>
                        <label class="control-label col-md-2">请输入建档时间：</label>
                        <div class="col-md-2">
                            <input type="date" class="form-control" id="search_registerTime1" name="search_registerTime1">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control" id="search_registerTime2" name="search_registerTime2">
                        </div>
                        <div class="col-md-1">
                            <input type="button" class="btn btn-info" value="查询" id="file_search_btn">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--查询后的表格数据-->
        <table id="file_list_table"></table>
    </div>



<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<!--<script type="text/javascript" src="/js/index.js"></script>-->

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>


<script>
    $(function (){
        //发送查询请求获取的数据
        $("#file_list_table").bootstrapTable({
            //请求方式
            method:"post",
            //内容类型：如果请求方式是post，内容类型必须是application/x-www-form-urlencoded
            contentType:"application/x-www-form-urlencoded",
            //请求路径
            url:"/design/file/list",
            // 数据行交替样式
            striped: true,
            // 是否是服务器端分页：server表示服务器端，client表示前端分页
            sidePagination: 'server',
            //初始化加载第一页
            pageNumber: 1,
            //是否分页
            pagination:true,
            // 单页记录数，页大小
            pageSize: 5,
            // 分页列表
            pageList: [ 10, 20],
            // 请求参数
            queryParams: function (params) {
                let obj = {
                    // params.limit获取组件中的页大小
                    // params.offset获取请求数据的起始索引
                    pageSize: params.limit,
                    pageNo: (params.offset / params.limit) + 1,
                    //获取查询条件的值
                    search_firstKindId:$("#file_search_form #search_firstKindId").val(),
                    search_secondKindId:$("#file_search_form #search_secondKindId").val(),
                    search_thirdKindId:$("#file_search_form #search_thirdKindId").val(),
                    search_type:$("#file_search_form #search_type").val(),
                    search_registerTime1:$("#file_search_form #search_registerTime1").val(),
                    search_registerTime2:$("#file_search_form #search_registerTime2").val()
                }
                return obj;
            },
            // 表格列标题
            columns:[{
                title:"产品编号",
                field:"productId",
                sortable:true,
                formatter:function (value,row,index){
                    // let obj="<a href='javascript:getOne("+row.id+")'>"+value+"</a>"
                    // return obj;
                    return `<a href='javascript:getOne(${row.id})'>${row.productId}</a>`
                }
            },{
                title: "产品名称",
                field: "productName"
            },{
                title: "档次级别",
                field: "productClass",
                formatter:function (value,row,index){
                    if(row.productClass === "D001-1")
                        return "高档"
                    else if(row.productClass === "D001-2")
                        return "中档"
                    else if(row.productClass === "D001-3")
                        return "低档"
                }
            },{
                title: "I级分类",
                field: "firstKindName"
            },{
                title: "II级分类",
                field: "secondKindName"
            },{
                title: "III级分类",
                field: "thirdKindName"
            },{
                title: "用途类型",
                field: "type",
                formatter:function (value, row, index){
                    if(row.type==="Y001-1")
                            return "商品"
                        else
                            return "物料"
                }
            },{
                title: "产品经理",
                field: "responsiblePerson"
            }]
        })


        //I级分类
        firstKind()
        //II级分类
        secondKind()
        //III级分类
        thirdKind()
        //点击查询条件进行查询
        $("#file_search_btn").click(function (){
            $("#file_list_table").bootstrapTable('refresh')
        })
    })
    function firstKind(){
        $.post("/design/file/select",{"kid":"1"},function (res){
            $("#file_search_form #search_firstKindId option:gt(0)").remove()
            for(let i=0;i<res.length;i++){
                let obj=res[i]
                let $op=$("<option>"+obj.kindName+"</option>")
                $op.val(obj.kindId)
                $("#search_firstKindId").append($op)
            }
        })
    }
    function secondKind(){
        $.post("/design/file/select",{"kid":"2"},function (res){
            $("#file_search_form #search_secondKindId option:gt(0)").remove()
            for(let i=0;i<res.length;i++){
                let obj=res[i]
                let $op=$("<option>"+obj.kindName+"</option>")
                $op.val(obj.kindId)
                $("#search_secondKindId").append($op)
            }
        })
    }
    function thirdKind(){
        $.post("/design/file/select",{"kid":"3"},function (res){
            $("#file_search_form #search_thirdKindId option:gt(0)").remove()
            for(let i=0;i<res.length;i++){
                let obj=res[i]
                let $op=$("<option>"+obj.kindName+"</option>")
                $op.val(obj.kindId)
                $("#search_thirdKindId").append($op)
            }
        })
    }

    //点击产品编号id查看详情
    function getOne(id){
        localStorage.setItem("id",id)
        window.location="/design/design_product_file_inquiryUI"
    }
</script>
</body>
</html>